<template>
    <div>
        <!-- 头部开始 -->
        <div class="header">
            {{ title }}
        </div>
        <!-- 头部结束 -->
        <!-- 体部开始 -->
        <div class="content">
            <div class="top">
                <div class="left">
                    <div class="chart">
                        <Left1></Left1>
                    </div>
                    <div class="chart">
                        <left2></left2>
                    </div>
                </div>
                <div class="center">
                   <Map></Map>
                </div>
                <div class="right">
                    <div class="chart">
                        <right1></right1>
                    </div>
                    <div class="chart">
                        <Right2></Right2>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="chart">
                    <bottom1></bottom1>
                </div>
                <div class="chart">
                    <bottom2></bottom2>
                </div>
                <div class="chart">
                    <bottom3></bottom3>
                </div>
                <div class="chart">
                    <bottom4></bottom4>
                </div>
            </div>
        </div>
        <!-- 体部结束 -->
    </div>
</template>
<script>
//引入全部组件
import Left1 from './components/Left1.vue'
import Left2 from './components/Left2.vue'
import Right1 from './components/Right1.vue'
import Right2 from './components/Right2.vue'
import Bottom1 from './components/Bottom1.vue'
import Bottom2 from './components/Bottom2.vue'
import Bottom3 from './components/Bottom3.vue'
import Bottom4 from './components/Bottom4.vue'
import Map from './components/Map.vue'




export default {
    //局部注册组件
    components:{
        Left1,
        Left2,
        Right1,
        Right2,
        Bottom1,
        Bottom2,
        Bottom3,
        Bottom4,
        Map
    },
    data() {
        return {
            title: '智慧城市大气环境监测平台'
        }
    }
}
</script>
<style lang="less" scoped>
// 头部样式开始
.header {
    height: 60px;
    background-image: url('../assets/layout/header.png');
    background-size: 100% 200px;
    text-align: center;
    line-height: 45px;
    color: white;
    font-size: 28px;
    font-family: "楷体";
}

// 头部样式结束


// 体部样式开始
.content {
    height: calc(100vh - 60px);
    // 给父元素开启伸缩盒
    display: flex;
    flex-direction: column;

    .top {
        flex: 2;
        display: flex;
        // 组合选择器 选择器1,选择器2,选择器3...{}
        .left,
        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            // &表示直接父元素 
            &>div{
                flex: 1;
            }
        }
        .center {
            flex: 2;
            background-image: url(../assets/layout/chart_center_box_bg.png);
            background-size: 100% 100%;
            margin: 0px 5px 10px 5px;
        }
    }
    .bottom {
        flex: 1;
        display: flex;
        &>div{
            flex: 1;
        }
    }
    .chart{
        background-image: url(../assets/layout/chart_box_bg.png);
        background-size:100% 100%;
        margin: 0px 5px 10px 5px;
        padding: 10px;
        box-sizing: border-box;
        color: white;
    }
}

// 体部样式结束</style>